<template>
  <div style="display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100vh;">
    <h3>找个搭子~</h3>
    <p style="color: #999; font-size: 12px;margin-bottom: 100px">@程序媛Gigi出品 2024</p>
    <van-form @submit="onSubmit">
      <van-cell-group inset>
        <van-field
            v-model="userAccount"
            name="userAccount"
            label="账号"
            placeholder="请输入账号"
            :rules="[{ required: true, message: '请填写账号' },
            { pattern: /^[a-zA-Z0-9]{6,}$/, message: `账号不能包含特殊字符且长度不少于6` }]"
        />
        <van-field
            v-model="userPassword"
            type="password"
            name="userPassword"
            label="密码"
            placeholder="请输入密码"
            :rules="[{ required: true, message: '请填写密码' },
                     {
                        pattern: /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[a-zA-Z\d]{8,10}$/,
                        message: '密码必须包含大小写字母和数字的组合，不能使用特殊字符，长度在8-10之间',
                     }]"
        />
      </van-cell-group>
      <div style="margin: 16px;">
        <van-button round block type="primary" native-type="submit">
          登录
        </van-button>
      </div>
    </van-form>
    <a style="font-size: 12px; color: #999;" :href="isDev ? 'http://localhost:8000/user/login' :
    'https://userhub.gigi-code.asia/user/login'">新用户？点我注册</a>
  </div>
</template>

<script setup lang="ts">
import {ref} from "vue";
import myAxios from "../plugins/myAxios";
import {useRouter} from "vue-router";
import 'vant/es/toast/style';
import {showSuccessToast} from "vant/lib/toast/function-call";
import {closeToast, showLoadingToast} from "vant/es";

const isDev = process.env.NODE_ENV === 'development';
const userAccount = ref(isDev ? 'gigi123' : '');
const userPassword = ref(isDev ? 'Zyy123123' : '');
const router = useRouter();
const onSubmit = async () => {
  showLoadingToast({message: '登录中...', forbidClick: true, duration: 0});
  const response = await myAxios.post('/user-manage/login', {
    userAccount: userAccount.value,
    userPassword: userPassword.value
  }) as any;
  closeToast();
  // 处理响应
  if (response) {
    router.push('/');
    showSuccessToast('登录成功');
  }
};
</script>
